<template>
  <view class="order-box" @click="handleDetail">
    <u-row>
      <u-col span="9">
        <view v-if="row.type == 'shop'" class="sn-top">
          {{ row.shop.shopname || "-" }}
        </view>
        <view v-else class="sn-time">{{ row.createtime_text || "-" }}</view>
      </u-col>
      <u-col span="3">
        <u-text :text="statusLabel" color="#3BA199" size="28rpx" align="right" />
      </u-col>
    </u-row>
    <view class="sn-body" v-for="p in row.goods" :key="p.id">
      <u-image
        show-loading
        :show-menu-by-longpress="false"
        :src="domain + p.image"
        width="116rpx"
        height="116rpx"
        radius="10rpx"
      />
      <view class="sn-center">
        <view class="sn-center-top">{{ p.title || "-" }}</view>
        <u-text
          v-if="row.type == 'shop'"
          :text="p.difference"
          color="#555"
          size="24rpx"
        />
        <u-text
          v-if="row.type != 'shop'"
          :text="`${row.type == 'party' ? '支付时间' : '有效期'}：${$TimeFormat(
            row.verify_expire_time * 1000,
            'yyyy-mm-dd hh:MM'
          )}`"
          color="#555"
          size="24rpx"
        />
        <u-text
          v-if="row.type != 'shop'"
          :text="`订单编号：${row.order_no}`"
          color="#555"
          size="24rpx"
        />
      </view>
      <view class="sn-right">
        <u-text
          v-if="row.type == 'shop'"
          mode="price"
          :text="p.price"
          color="#FF3E3E"
          size="28rpx"
          align="right"
          line-height="40rpx"
        />
        <u-text
          v-if="row.type == 'shop'"
          :text="`X${p.number}`"
          color="#979797"
          size="26rpx"
          align="right"
          line-height="40rpx"
        />
      </view>
    </view>
    <u-gap height="26rpx" />
    <u-row>
      <u-col span="6">
        <view class="footer-left">
          <text v-if="row.type == 'shop'">应付金额：</text>
          <text>￥{{ row.pay.price || 0 }}</text>
        </view>
      </u-col>
      <u-col span="6">
        <view class="footer-right">
          <view class="grey" v-if="row.state == 1" @click.stop="handleClick('cancel')">
            取消订单
          </view>
          <view class="green" v-if="row.state == 1" @click.stop="handleClick('pay')">
            立即付款
          </view>
          <view
            class="grey"
            v-if="row.state > 2 && row.type == 'shop' && row.state != 7"
            @click.stop="handleClick('transport')"
          >
            查看物流
          </view>
          <view
            class="green"
            v-if="row.state == 4 && row.type == 'shop'"
            @click.stop="handleClick('comment')"
          >
            评论订单
          </view>
          <view class="green" v-if="row.state == 8" @click.stop="handleClick('qrcode')">
            查看券码
          </view>
          <view class="green" v-if="row.state == 3" @click.stop="handleClick('receive')">
            确认收货
          </view>
          <view
            class="grey"
            v-if="row.state == 6 || row.state == 7"
            @click.stop="handleClick('delete')"
          >
            删除订单
          </view>
        </view>
      </u-col>
    </u-row>
  </view>
</template>

<script>
import config from "@/request/baseUrl.js";
export default {
  data() {
    return {
      domain: config.baseUrl,
    };
  },
  props: {
    // row.type 参数 information动态信息, party吃喝玩乐, subject主题活动, project娱乐项目, shop商城
    row: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {
    // 状态
    statusLabel() {
      let v = this.row.state;
      if (v == -2) return "交易关闭";
      else if (v == 1) return "待付款";
      else if (v == 2) return "待发货";
      else if (v == 3) return "待收货";
      else if (v == 4) return "待评论";
      else if (v == 6) return "已完成";
      else if (v == 7) return "已取消";
      else if (v == 8) return "待消费";
      else return "";
    },
  },
  methods: {
    // 处理按钮事件
    handleClick(v) {
      this.$emit("click", {
        button: v,
        ...this.row,
      });
    },
    // 查看详情
    handleDetail() {
      if (this.row.type == "shop") {
        uni.navigateTo({ url: `/pages/my/myOrderDetail?id=${this.row.id}` });
      } else {
        uni.navigateTo({ url: `/pages/my/myOrderCode?id=${this.row.id}` });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.order-box {
  padding: 20rpx 30rpx;
  box-shadow: 0px 0px 10px rgba(186, 186, 186, 0.2);
  border-radius: 10px;
  margin-bottom: 30rpx;
  .sn-top {
    font-size: 28rpx;
    font-weight: 600;
    color: #222;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .sn-time {
    font-size: 28rpx;
    color: #979797;
  }
  .sn-body {
    padding: 30rpx 0;
    display: flex;
    border-bottom: 1rpx dashed rgba(217, 217, 217, 0.6);
    .sn-center {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 116rpx;
      margin-left: 20rpx;
      &-top {
        font-size: 28rpx;
        font-weight: 600;
        color: #222;
        line-height: 40rpx;
        word-break: break-all;
      }
    }
    .sn-right {
      width: 170rpx;
      position: relative;
    }
  }
  .footer-left {
    font-family: "PingFang SC";
    font-size: 28rpx;
    font-weight: 400;
    color: #222;
    line-height: 44rpx;
    > text:last-child {
      color: #ff3e3e;
      font-size: 32rpx;
      font-weight: 500;
    }
  }
  .footer-right {
    display: flex;
    justify-content: flex-end;
    > view {
      display: inline-block;
      height: 56rpx;
      width: 160rpx;
      text-align: center;
      line-height: 56rpx;
      font-size: 28rpx;
      border-radius: 40rpx;
      &:nth-child(2) {
        margin-left: 10rpx;
      }
    }
    .grey {
      color: #979797;
      background-color: #f6f6fb;
      &:active {
        background-color: #e9e9f1;
      }
    }
    .green {
      color: $active-color;
      background-color: #cee7e5;
      &:active {
        background-color: #c2dcda;
      }
    }
  }
}
</style>
